<!-- 顺风车空车列表 -->
<template>
  <div class="sfc-empty-car-list">
    <div ref="dgtools" class="filter-container">
      <div class="dgts-row">
        <el-form 
          :model="dg.ps" 
          :inline="true" 
          @keyup.enter.native="getDgList(1)">
          <el-form-item>
            <el-date-picker
              v-model="dg.ps.sedate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 205px"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>

          <el-button 
            type="primary" 
            icon="el-icon-search" 
            @click="getDgList(1)">
            搜索
          </el-button>

          <el-button 
            type="primary" 
            icon="el-icon-truck"
            @click="setPubEmptyCarMd({state: true})">
            发布空车
          </el-button>

          <el-button 
            type="danger" 
            icon="el-icon-delete"
            @click="delEmptyCar">
            删除
          </el-button>
        </el-form>
      </div>

      <TableSelfSet 
        v-if="dg.columns.length > 0" 
        :tbTitle="'顺风车订单列表'" 
        :dgName="dg.dgName" 
        :tbId="dg.tbName" 
        :srcCols="dg.srcCols" 
        :columns="dg.columns" 
        @saveSet="saveTbSet"
      />
    </div>
    
    <el-table
      :ref="dg.tbName"
      :data="dg.list"
      row-key="id"
      :height="bodyHeight"
      border fit 
      :row-class-name="rowClassName"
      @header-dragend="dragHeader"
      @selection-change="selRowChange">
      <el-table-column 
        fixed="left" 
        type="index" 
        label="编号"
        align="center" 
        :resizable="false" 
        width="40">
      </el-table-column>
      <el-table-column 
        fixed="left" 
        type="selection" 
        align="center" 
        :resizable="false" 
        width="40">
      </el-table-column>
      <el-table-column 
        v-for="(col, index) in dg.columns" 
        :key="index"
        :class-name="dg.dgName"
        :prop="col.field"
        :label="col.label"
        :width="col.width">
        <template slot-scope="{row}">
          <template v-if="col.field == 'stime'">
            {{row.stime | time('yyyy年MM月dd号 HH:mm')}}
          </template>

          <span v-else-if="col.field == 'etime'">
            {{row.etime | time('yyyy年MM月dd号 HH:mm')}}
          </span>

          <span v-else-if="col.field == 'spoint'">
            {{row.spoint.address}}
          </span>

          <span v-else-if="col.field == 'epoint'">
            {{row.epoint.address}}
          </span>

          <template v-else>{{ getColVal(row, col.field) }}</template>
        </template>
      </el-table-column>
    </el-table>
    <Pagination 
      v-show="dg.total > 0" 
      :total="dg.total" 
      :page.sync="dg.ps.page" 
      :limit.sync="dg.ps.rows" 
      @pagination="getDgList()"
    />

    <PubEmptyCar
      v-if="pubEmptyCarMd.state"
      :myData="pubEmptyCarMd"
      @myClick="setPubEmptyCarMd"
      @reloadDg="getDgList()"
    />
  </div>
</template>

<script>
// import elDragDialog from '@/directive/el-drag-dialog';
import DataGridBase from '@/views/mixins/DataGridBase';
import DataGridResize from '@/views/mixins/DataGridResize';
import TableSelfSet from '@/components/TableSelfSet';    
import Pagination from '@/components/Pagination';

import PubEmptyCar from './pub-emtpy-car';

import * as orderSer from '@/api/services/order.service';

export default {
  mixins: [ DataGridBase, DataGridResize],
  // directives: { elDragDialog },
  components: { TableSelfSet, Pagination, PubEmptyCar },
  data() { 
    let cols = [
      {label: '出发时间', field: 'stime', width: 150},
      {label: '结束时间', field: 'etime', width: 150},
      {label: '最晚等待时间', field: 'waitTime', width: 150},
      {label: '开始地点', field: 'spoint', width: 'auto'},
      {label: '结束地点', field: 'epoint', width: 'auto'},
      {label: '车牌', field: 'plateNum', width: 100},
      {label: '人数', field: 'customers', width: 100},
      {label: '添加时间', field: 'addTime', width: 150}
    ];
    return {
      dg: {
        dgName: 'dg',
        tbName: 'sfcEmptyCarListTb',
        total: 0,
        list: [],
        srcCols: cols,
        columns: [],
        selRows: [],
        ps: {
          page: 1, rows: 20,
          // 出行起止日期
          sedate: [],
        },
      },

      // 发布空车-弹框
      pubEmptyCarMd: {state: false},

    }
  },
  created() {
    const that = this;

    that.initTbSetData(that.dg.dgName);
    that.getDgList();
  },
  methods:{
    // 获取-表格列表
    getDgList(page){
      const that = this, U = that.U, dg = that.dg, ps = U.scopy(dg.ps);
      
      ps.stime = ps.sedate?.length == 2 ? ps.sedate[0] : '';
      ps.etime = ps.sedate?.length == 2 ? ps.sedate[1] : '';
      delete ps.sedate;
      
      if(page) ps.page = page;
      orderSer.getSfcEmptyCarPageList(ps).then(res => {
        if(res?.code != 1){
          U.qerror(res.msg);
        }else{
          let list = res?.data || [];
          list.forEach(it => {it.dgName = dg.dgName;});
      
          dg.list = list;
          dg.total = res?.count || 0;
        }
      });
    },

    // 发布空车
    setPubEmptyCarMd(e){
      const that = this, U = that.U, md = that.pubEmptyCarMd;

      if(!e.state){// 关闭-弹框
        md.state = false;
      }else{// 打开-弹框
        md.state = true;
      }
    },

    // 删除
    delEmptyCar(){
      const that = this, U = that.U, rows = that.getSeledRows();

      if(rows.length !== 1){
        U.qerror(`${rows.length == 0 ? '请' : '只能'}选择一条数据`);
      }else{
        let row = rows[0];
        U.qconfim(`确认删除所选数据吗？`).then(r => {
          if(r){
            orderSer.delSfcEmptyCar({delId: row.id }).then(res => {
              if(res.code !== 1){
                U.qerror(res.msg);
              }else{
                U.qsuccess(res.msg);

                // 刷新列表
                that.getDgList();
              }
            });
          }
        });
      }
    },

  },
 }
</script>